<template>
	<view>
		<image src="../../../客服微信.jpg"></image>
	</view>
</template>

<script>
	import jwt from '@/utils/jwt.js';
	import { login,googleOauth,facebootOauth,mailLogin} from '@/common/http.api.js';
	import { setTokenStorage } from '@/utils/token';
	import logger from '@/utils/logger';
	import { genTestUserSig } from '@/debug/GenerateTestUserSig.js';
	const { getTokenStorage } = require('@/utils/token.js');
	import {isEmpty,isNotEmpty} from '@/utils/utils';
	import {timLogin} from '@/utils/tim.js'
	import {mapState} from "vuex";
	const app = getApp();
    export default {
        data() {
            return {
                mail: '',
				password:'',
				sessionID: '',
				accountText:'',
				passwordText:'',
				loginText:'',
				noaccountText:'',
				signupnowText:'',
				threewayloginText:'',
				fillpasswordText:'',
				fillaccountText:'',
				loginerrorText:'',
				loginsuccessText:'',
				fillaccountruleText:'',
				fillpasswordrule:'',
				mailText:'',
				fillmailText:'',
            }
        },
		computed:{
			...mapState({
				timLogin:state=>state.tim.timLogin,
				isSDKReady:state=>state.tim.isSDKReady
			})
		},
		onShow() {
			this.$store.commit('reset')
			this.refresh();
		},
		onLaunch(){

		},
		onLoad(){
			uni.getStorage({
				// 获取本地缓存
				key: 'sessionID',
				success(res) {
					that.setData({
						sessionID: res.data
					});
				}
			});
		},
        methods: {
			refresh(){
				this.accountText = this.$t('login.account.text');
				this.passwordText = this.$t('login.password.text');
				this.loginText = this.$t('login.login.text');
				this.noaccountText = this.$t('login.noaccount.text');
				this.signupnowText = this.$t('login.signupnow.text');
				this.threewayloginText = this.$t('login.threewaylogin.text');
				this.fillpasswordText = this.$t('login.fillpassword.text');
				this.fillaccountText = this.$t('login.fillaccount.text');
				this.loginerrorText = this.$t('login.loginerror.text');
				this.loginsuccessText = this.$t('login.loginsuccess.text');
				this.fillaccountruleText = this.$t('login.fillaccountrule.text');
				this.fillpasswordruleText = this.$t('login.fillpasswordrule.text');
				
				this.mailText = this.$t('login.mail.text');
				this.fillmailText = this.$t('login.fillmail.text');
			},
			onGoogleLogin(){
				debugger
				let that = this;
				uni.login({
				    provider: 'google',
				    success: function (loginRes) {
				        // 登录成功
				        uni.getUserInfo({
				            provider: 'google',
				            success: function(info) {
								googleOauth(info.userInfo).then(res => {
									if (res.code === 0) {
										that.$refs.uToast.show({
											message: that.loginsuccessText,
											type: 'success'
										})
										jwt.setAccessToken(res.data.accessToken);
										jwt.refreshMemberInfo();
										jwt.setLogin(true);
										uni.hideLoading();
										//timLogin();
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/tabbar/home/home'
											});
										}, 500);
									}else{
										uni.showModal({
											showCancel: false,
											title: that.loginerrorText,
											content: res.msg,
										});
									}
								});
				            }
				        })
				    },
				    fail: function (err) {
				        // 登录授权失败  
				        // err.code是错误码
						console.error(err)
				    }
				});
			},
			onFaceBookLogin(){
				debugger
				let that = this;
				uni.login({
				    provider: 'facebook',
				    success: function (loginRes) {
				        // 登录成功
				        uni.getUserInfo({
				            provider: 'facebook',
				            success: function(info) {
								facebootOauth(info.authResult.userInfo).then(res => {
									if (res.code === 0) {
										that.$refs.uToast.show({
											message: that.loginsuccessText,
											type: 'success'
										})
										jwt.setAccessToken(res.data.accessToken);
										jwt.refreshMemberInfo();
										jwt.setLogin(true);
										uni.hideLoading();
										//timLogin();
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/tabbar/home/home'
											});
										}, 500);
									}else{
										uni.showModal({
											showCancel: false,
											title: that.loginerrorText,
											content: res.msg,
										});
									}
								});
				            }
				        })
				    },
				    fail: function (err) {
						console.error(err)
				        // 登录授权失败  
				        // err.code是错误码
				    }
				});
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
            register() {
                uni.navigateTo({
                    url: '/pages/common/public/register_one'
                });
            },
            navBack() {
                uni.navigateBack();
            },
			codeLogin() {
				let that = this;
				if(!this.mail){
					this.$refs.uToast.show({
						message: that.fillaccountruleText,
						type: 'error'
					})
					return;
				}
				if(!this.password){
					this.$refs.uToast.show({
						message: that.fillpasswordruleText,
						type: 'error'
					})
					return;
				}
				mailLogin({
					mail: this.mail,
					password: this.password
				}).then(res => {
					debugger
					console.info(res.msg)
					if (res.code === 0) {
						this.$refs.uToast.show({
							message: that.loginsuccessText,
							type: 'success'
						})
						jwt.setAccessToken(res.data.accessToken);
						jwt.refreshMemberInfo();
						jwt.setLogin(true);
						uni.hideLoading();
						//timLogin();
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabbar/home/home'
							});
						}, 500);
					}else{
						uni.showModal({
						    showCancel: false,
						    title: that.loginerrorText,
						    content: res.msg,
						});
					}
				});
				uni.hideLoading();
			},
        },

    }
</script>

<style lang='scss'>
    page {
        background: #fff;
		min-height: 100%;
    }
	.logo {
		width: 260rpx;
		height: 260rpx;
		border-radius: 50%;
		margin: 10rpx auto 20rpx auto;
	}
	
	.logo image {
		width: 260rpx;
		height: 260rpx;
		border-radius: 50%;
	}
    .cu-form-group{
		background-color: #ffffff;
		padding: 1px 15px;
		display: flex;
		align-items: center;
		min-height: 51px;
		justify-content: space-between;
	}
	.cu-form-group .title {
	    text-align: justify;
	    padding-right: 15px;
	    font-size: 15px;
	    position: relative;
	    height: 30px;
	    line-height: 30px;
	}
	.cu-form-group uni-input {
	    flex: 1;
	    font-size: 15px;
	    color: #555;
	    padding-right: 10px;
	}
    .send-msg {
        border-radius: 30px;
        color: black;
        background: white;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
    }

    .container {
        top: 0;
        padding-top: 50px;
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #fff;
    }

    .wrapper {
        position: relative;
        z-index: 90;
        background: #fff;
        padding-bottom: 20px;
    }

    .back-btn {
        position: absolute;
        left: 20px;
        z-index: 9999;
        padding-top: var(--status-bar-height);
        top: 20px;
        font-size: 20px;
        color: #303133;
    }

    .left-top-sign {
        font-size: 80px;
        color: #f8f8f8;
        position: relative;
    }


    .right-top-sign {
        position: absolute;
        top: 40px;
        right: -15px;
        z-index: 95;

        &:before, &:after {
            display: block;
            content: "";
            width: 20px;
            height: 40px;
            background: #e10a07;
        }

        &:before {
            transform: rotate(50deg);
            border-radius: 0 50px 0 0;
        }

        &:after {
            position: absolute;
            right: -198px;
            top: 0;
            transform: rotate(-50deg);
            border-radius: 50px 0 0 0;
            /* background: pink; */
        }
    }

    .left-bottom-sign {
        position: absolute;
        left: -270px;
        bottom: -320px;
        /*border: 100upx solid #d0d1fd;*/
        border-radius: 50%;
        padding: 90px;
    }

    .welcome {
        position: relative;
        left: 30px;
        top: -55px;
        font-size: 28px;
        color: #555;
        text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
    }

    .input-content {
        padding: 0 20px;
    }

    .input-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 0 30px;
        background: #f8f6fc;
        height: 64px;
        border-radius: 4px;
        margin-bottom: 30px;

        &:last-child {
            margin-bottom: 0;
        }

        .tit {
            height: 30px;
            line-height: 28px;
            font-size: 26upx;
            color: #606266;
        }

        input {
            height: 40px;
            font-size: 30upx;
            color: #303133;
            width: 100%;
        }
    }

    .confirm-btn {
        width: 300px;
        height: 42px;
        line-height: 42px;
        border-radius: 30px;
        margin-top: 40px;
        background: #e10a07;
        color: #fff;
        font-size: 32upx;

        &:after {
            border-radius: 60px;
        }
    }

    .confirm-btn1 {
        width: 300px;
        height: 42px;
        line-height: 42px;
        border-radius: 30px;
        margin-top: 40px;
        background: whitesmoke;
        color: grey;
        font-size: 32upx;

        &:after {
            border-radius: 60px;
        }
    }

    .forget-section {
        font-size: 26upx;
        color: #4399fc;
        text-align: center;
        margin-top: 40px;
    }

    .register-section {
        left: 0;
        margin-top: 30px;
        bottom: 30px;
        width: 100%;
        font-size: 26upx;
        color: #606266;
        text-align: center;

        text {
            color: #4399fc;
            margin-left: 10px;
        }
    }
	
	.send-msg {
		border-radius: 30px;
		color: white;
		height: 30px;
		font-size: 14px;
		line-height: 30px;
		background: #e10a07;
	}
	
	.send-msgs {
		border-radius: 30px;
		color: black;
		height: 30px;
		font-size: 14px;
		line-height: 30px;
		background: white;
	}
</style>
